////
/// Components
/// PillSwitch props
////

$pill-switch-size: 27.2rem;
$pill-switch-size-tablet: 54.8rem;

$pill-switch-control-size: 13rem;
$pill-switch-control-size-tablet: 32rem;

$pill-switch-radius: $pill-switch-control-size / 2;
$pill-switch-radius-tablet: $pill-switch-control-size-tablet / 2;

$pill-switch-data: (
  size: (
    base: $pill-switch-size,
    tablet: $pill-switch-size-tablet,
  ),
  radius: (
    base: $pill-switch-radius,
    tablet: $pill-switch-radius-tablet,
  ),
  control-size: (
    base: $pill-switch-control-size,
    tablet: $pill-switch-control-size-tablet,
  ),
  track-width: (
    base: $pill-switch-control-size * 2 + $pill-switch-radius,
    tablet: $pill-switch-control-size-tablet * 2,
  ),
);

@function pill-switch($group: $threads-default-value, $variant: $threads-default-value) {
  @return threads-value-get($pill-switch-data, $group, $variant);
}

///
/// Mixins
@mixin pill-switch-track-layout($breakpoint: 'base') {
  margin-top: -(pill-switch(radius, $breakpoint));
  margin-left: -(pill-switch(track-width, $breakpoint) / 2);
  width: pill-switch(track-width, $breakpoint);
  height: pill-switch(control-size, $breakpoint);
  border-radius: pill-switch(radius, $breakpoint);
}

@mixin pill-switch-border($width) {
  // cannot use border as the psuedo elements will not overlap
  box-shadow: inset 0 0 0 $width get-color(brand, blue);
}
